<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
    <meta name="author" content="Coderthemes">

    <link rel="stylesheet" href="/adminstatic/base/base.css"/>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <script src="/adminstatic/base/baseCss.js"></script>

    <style type="text/css">
        html, body {
            background: #fff;
        }

        .layui-input-block {
            margin-left: 0;
        }

        #container{
            width: 100%;
            height: 450px;
            position: relative;
        }

        .input-card{
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: 100;
        }

        .address-but{
            width: 10rem;
            margin-left: 6.8rem;
            display: inline-block;
            font-weight: 400;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: 1px solid transparent;
            transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
            background-color: transparent;
            background-image: none;
            color: #25A5F7;
            border-color: #25A5F7;
            padding: 0.25rem 0.5rem;
            line-height: 1.5;
            border-radius: 2rem;
            -webkit-appearance: button;
            cursor: pointer;
        }

        .address-but:hover {
            text-decoration: none;
        }

        .address-but:hover {
            color: #fff;
            background-color: #25A5F7;
            border-color: #25A5F7;
        }
    </style>
</head>

<body class="fixed-left">

<!-- Begin page -->
<div id="wrapper" style="overflow: auto;">

    <div class="container">

        <div class="panel panel-default" style="box-shadow: none">
            <div class="panel-body">
                <form class="layui-form" action="">
                    <input type="hidden" name="id" value="<%=id%>"/>
                    <input type="hidden" name="longitude" value="<%=longitude%>"/>
                    <input type="hidden" name="latitude" value="<%=latitude%>"/>
                    <div id="inputForm" class="form-horizontal">
                        <div class="form-group">
                            <div class="col-md-12">
                                <label for="name"><small class="notNullFlag">*</small> 门店名称</label>
                                <input class="form-control" type="text" id="name" name="name"
                                       value="<%=name%>" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-12 ">
                                <label ><small class="notNullFlag">*</small> 门店地址</label>
                                <div id="container">
                                    <div class="input-card" style='width:28rem;'>
                                        <label style='color:grey'>地理编码，根据地址获取经纬度坐标</label>
                                        <div class="input-item">
                                            <div class="input-item-prepend"><span class="input-item-text" >地址</span></div>
                                            <input id='address' type="text" value="<%=address%>" >
                                        </div>
                                        <div class="input-item">
                                            <div class="input-item-prepend"><span class="input-item-text">经纬度</span></div>
                                            <input id='lnglat' disabled type="text" >
                                        </div>
                                        <input id="geo" type="button" class="address-but" value="地址 -> 经纬度" />
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div id="actions">
                <button type="button" class="layui-btn layui-btn-normal" id="submitBtn">保存</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="closeIframe()">取消</button>
            </div>
        </div><!-- panel-body -->
    </div> <!-- panel -->

</div> <!-- container -->

</div>
<script src="/adminstatic/base/base.js"></script>
<script type="application/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:'dba583a7257500cbe07e74e69e397cfc',
    }
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=33a9665539ce5ee24200cf3f7f89824d&plugin=AMap.Geocoder"></script>
<script type="text/javascript">
    var address = document.getElementById('address').value;
    var latitude = $("input[name='latitude']").val();
    var longitude = $("input[name='longitude']").val();
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [longitude, latitude],
    });
    var marker = new AMap.Marker();
    var lnglat = $('#lnglat').val();
    marker.setPosition(lnglat);
    map.add(marker);
    map.setFitView(marker);
    var geocoder = new AMap.Geocoder({});

    function geoCode() {
        $('#lnglat').val('');
        address  = $('#address').val();
        console.log(address)
        geocoder.getLocation(address, function(status, result) {
            if (status === 'complete'&&result.geocodes.length) {
                var lnglat = result.geocodes[0].location;
                console.log(lnglat)
                longitude = lnglat.lng;
                latitude = lnglat.lat;
                document.getElementById('lnglat').value = lnglat;
                marker.setPosition(lnglat);
                map.add(marker);
                map.setFitView(marker);
            }else{
                log.error('根据地址查询位置失败');
            }
        });
    }
    document.getElementById("geo").onclick = geoCode;
    document.getElementById('address').onkeydown = function(e) {
        if (e.keyCode === 13) {
            geoCode();
            return false;
        }
        return true;
    };


    $("#submitBtn").click(function () {
        var name = $("input[name='name']").val();
        var id = $("input[name='id']").val();
        console.log(address,name,longitude,latitude);

        if (!vaildeParam(name)) {
            layer.msg("门店名称不能为空", {icon: 5});
            return;
        }

        if (!vaildeParam(address)) {
            layer.msg("地址名称不能为空", {icon: 5});
            return;
        }

        if (!vaildeParam(longitude)) {
            layer.msg("经纬度不能为空", {icon: 5});
            return;
        }

        if (!vaildeParam(latitude)) {
            layer.msg("经纬度不能为空", {icon: 5});
            return;
        }

        var api = '/admin/storeAddress/update';
        var data = {
            "id":id,
            "address":address,
            "name": name,
            "longitude": longitude,
            "latitude": latitude,
        }

        postJSON(api, data, function (res) {
            cleanSuccess(res)
        })

    })
</script>
</body>
</html>